<template>
    <transition name='fade'>
        <div class="popup-score mask" @click.stop="scoreClose()" v-show="scoreShow">
            <transition name='fade'>
                <div class="score-main mask-con" v-show="scoreShow" @click.stop>
                    <div class="score-card">
                        <p v-html="scoreText"></p>
                        <div class="score-num">+{{scoreNum}}分</div>
                    </div>
                    <div class="mask-close-btn" @click="scoreClose()"></div>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
export default {
  name: 'popupScore',
  props:[
     "scoreShow",
     "scoreText",
     "scoreNum",
  ],
  data () {
    return {
      
    }
  },
  watch:{
    scoreShow(newVal,oldVal){
        if(newVal){
            touchFalse() 
        }else{
            touchTrue()
        }
    },
  },
  created:function() {
   
  },
  mounted:function() {

  },
  methods: {
    scoreClose(){
        this.$emit('scoreClose')
    },
    
  }
}
</script>
<style type="text/css" scoped>
.score-main{
    width: 6.3rem;
    height: 4.3rem;
    background: url(~@/assets/img/main/score-bg.png) no-repeat 0 0;
    background-size: 100%;
}
.score-card{
    font-weight: bold;
    width: 6.3rem;
    height: 3rem;
}  
.score-card p{
    font-size: 0.4rem;
    color: #666;
    text-align: center;
    line-height: 1;
    padding: 0.66rem 0 0.52rem;
}
.score-num{
    color: #ff7100;
    font-size: 0.36rem;
    width: 1.4rem;
    margin: 0 auto;
    line-height: 1;
    padding: 0.18rem 0 0.18rem 0.82rem;
    background: url(~@/assets/img/icon/score.png) no-repeat 0 center;
    background-size: 0.64rem 0.64rem;
}
</style>